<!--
 * @Date         : 2023-11-19 17:16:25
 * @LastEditTime : 2023-12-24 15:44:09
 * @description  : 
-->
<template>
  <view>
    <button
      open-type="chooseAvatar"
      @chooseavatar="onChooseAvatar"
      bind:chooseavatar="onChooseAvatar"
    >
      <image class="avatar" :src="avatarUrl"></image>
    </button>
    <!-- <input
      type="nickname"
      @blur="onblur"
      class="weui-input"
      placeholder="请输入昵称"
    /> -->
    <div class="row">
      <!-- <div class="left">
        <u-icon name="account-fill" color="#2979ff" size="28"></u-icon>
      </div> -->
      <div class="right">
        <u--input
          placeholder="请输入昵称"
          border="bottom"
          type="nickname"
          :value="nickname"
          @input="onblur"
        ></u--input>
      </div>
    </div>
    <div class="auth-button" @click="onAuth">提交</div>
  </view>
</template>

<script>
import { getStorage, removeStorage, setStorage } from "utils/auth";
import projectConfig from "@/common/config.js";
import { getUserinfo, updataUserInfo } from "apis/modules/user";
const defaultAvatarUrl =
  "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
export default {
  name: "userinfo",
  data() {
    return {
      avatarUrl: defaultAvatarUrl,
      url: "",
      nickname: "",
      isUpload: false,
    };
  },

  onLaunch() {},
  onShow() {
    let userInfo = getStorage("userInfo");
    this.nickname = userInfo.nickname;
    this.avatarUrl = userInfo.headimgurl || defaultAvatarUrl;
    this.isUpload = userInfo.headimgurl != defaultAvatarUrl;
  },
  onHide() {},
  methods: {
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail;
      let that = this;
      uni.uploadFile({
        url: `${projectConfig.baseUrl}/api/v1/upImage`, //仅为示例，非真实的接口地址
        filePath: avatarUrl,
        name: "file",
        header: {
          "access-user-token": getStorage("token"),
        },
        success: (uploadFileRes) => {
          console.log(uploadFileRes.data, "uploadFileRes");
          let result = JSON.parse(uploadFileRes.data);
          that.avatarUrl = result.data.fullUrl;
          that.isUpload = true;
        },
      });
    },
    onblur(e) {
      console.log(e);
      this.nickname = e;
    },
    onAuth() {
      let that = this;
      if (!this.nickname) {
        uni.showToast({
          title: "请修改名字",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      if (!this.isUpload) {
        uni.showToast({
          title: "请更新头像",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      console.log({ nickname: this.nickname, headimgurl: this.avatarUrl }, "提交用户信息");
      updataUserInfo({
        nickname: this.nickname,
        headimgurl: this.avatarUrl,
      }).then((res) => {
        uni.showToast({
          title: "修改成功",
          duration: 2000,
        });
        removeStorage("userInfo");
        setTimeout(() => {
          getUserinfo().then((info) => {
            setStorage("userInfo", info);
            that.$Router.pushTab({ path: "/pages/user/user" });
          });
        }, 1000);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin: 20rpx auto;
}
.auth-button {
  background: #eb5e15;
  color: #fff;
  margin: 40rpx auto;
  width: 40%;
  height: 80rpx;
  border-radius: 16rpx;
  text-align: center;
  line-height: 80rpx;
}
.row {
  display: flex;
  align-items: center;
  margin: 100rpx 0;
  .left {
    flex-shrink: 0;
    margin-right: 20rpx;
  }
  .right {
    flex: 1;
  }
}
</style>
